<template>
  <div>
    <Ordinary/>
   <h1>路由测试</h1>
   <div class="navigate">
   <RouterLink to="/home" active-class="active">首页</RouterLink>
   <RouterLink to="/news" active-class="active">新闻</RouterLink>
   <RouterLink to="/about" active-class="active">关于</RouterLink>
   </div>
   <div class="content">
    <RouterView></RouterView>
   </div>
  </div>
</template>

<script lang="ts" setup name="App">
import {RouterLink,RouterView} from "vue-router"
import Ordinary from "./components/Ordinary.vue";
</script>


<style>
h1{
  text-align: center;
}
.navigate{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}
a{
  text-decoration: none;
  font-size: 20px;
  color: rgb(127, 221, 255);
}
.content{
  border-radius: 20px;
  border: 1px black dotted;
  min-height: 700px;
}
.active{
  color: blue;
}
</style>